<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="${ctx}/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/weui.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/jquery-weui.css">
    <link rel="stylesheet" href="${ctx}/static/jqweui/css/icard.css?v=${cssVersion}">
    <link rel="stylesheet" href="${ctx}/static/font-awesome-4.7.0/css/font-awesome.css">

    <title>上传人脸图片</title>

    <style>
        .weui-dialog.weui-dialog--visible{
            width: 90%;
            max-width: 500px;
        }

        .weui-media-box:before{
            display: none;
        }
        .weui-media-box:after{
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid #E5E5E5;
            color: #E5E5E5;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
            left: 15px;
        }

        .weui-uploader__input-box:before{
            display: none;
        }
        .weui-uploader__input-box:after{
            display: none;
        }
        .weui-label{
            font-weight: 400;
            margin-bottom: 0px;
        }

        .toolbar-inner h1{
            margin-top: 0px;
            margin-bottom: 0px;
            margin-block-end: 0px;
            margin-block-start: 0px;
        }

        .weui-check_label {
            font-weight:400;
        }

        .toolbar .picker-button {
            color: #2e6da4 ;
        }

        .weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before {
            color: #2e6da4;
        }

        .picker-calendar-day.picker-calendar-day-selected span {
            background: #2e6da4;
        }

        i.icon.icon-next {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%232e6da4'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        }
        i.icon.icon-prev {
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%232e6da4'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        }
    </style>
</head>
<body>

<form id="collectFaceForm" onsubmit="return false;" method="post">

    <label>请选择图片或者拍照上传人脸,尽量保持姿势端正</label>
    <input class="photoBase64" id="photoBase64" name="photoBase64" type="hidden" value="">
    <div style="display: table-cell; text-align: right; padding-right: 5px; vertical-align: middle;">
        <div class="weui-uploader__input-box weui-uploader__file" style="border:1px dashed #D9D9D9;width:300px;height: 300px;float: right;margin-top: 9px;margin-left: 9px;margin-right: 0px;background-image:url(${ctx}/static/jqweui/images/camera2.jpg)">
            <input id="uploaderInput" onchange="chooseImg(event,this)" class="weui-uploader__input" type="file" accept="image/*" multiple="">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
        <div class="weui-cell__bd input-group">
            <input class="weui-input" id="idNo" name="idNo" type="text" placeholder="请输入身份证号">
            <div class="input-group-btn" style="width:1px;">
                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
            </div>
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">员工工号</label></div>
        <div class="weui-cell__bd input-group">
            <input class="weui-input" id="employeeNo" name="employeeNo" type="text" placeholder="请输入员工工号">
            <div class="input-group-btn" style="width:1px;">
                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
            </div>
        </div>
    </div>

    <div class="weui-btn-area " style="margin-bottom: 20px;">
        <button class="weui-btn weui-btn_primary btn-color-light-blue" id="submitBtn">提交</button>
    </div>

</form>


<script src="${ctx}/static/jqweui/js/jquery-2.1.4.js"></script>
<script src="${ctx}/static/jqweui/js/jquery-weui.js?v=1.3"></script>
<script src="${ctx}/static/handlerbars.min.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap-suggest.min.js"></script>
<script src="${ctx}/static/jquery.qrcode.min.js"></script>
<script src="${ctx}/static/jqweui/js/exif.js"></script>
<script type="text/javascript">

    $(function () {

    });

    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
    var maxSize = 4096 * 2048;
    // 图片最大宽度
    var maxWidth = 1024;
    // 最大上传图片数量
    var maxCount = 1;

    // 抓取模板数据

    function chooseImg(event,obj){
        var $thisObj = $(obj).parent();
        var files = event.target.files;
        var Orientation = null;
        if (files.length === 0) {
            return;
        }
        var file = files[0];
        var reader = new FileReader();
        if (allowTypes.indexOf(file.type) === -1) {
            $.alert("该类型不允许上传！", "警告！");
            return;
        }

        if (file.size > maxSize) {
            $.alert("图片太大，不允许上传", "警告！");
            return;
        }


        EXIF.getData(file, function() {
            Orientation = EXIF.getTag(this, 'Orientation');

            reader.readAsDataURL(file);
            reader.onload = function (e) {
                var img = new Image();
                img.src = e.target.result;
                img.onload = function () {
                    // 不要超出最大宽度
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');

                    if(Orientation && Orientation != 1){
                        var w = Math.min(maxWidth, img.width);
                        var showWidth = Math.min(300, img.width);
                        var showHeight = img.height * (showWidth / img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;

                        switch(Orientation){
                            case 6:     // 旋转90度
                                var w = Math.min(maxWidth, img.height);
                                var showWidth = Math.min(300, img.height);
                                var showHeight = img.width * (showWidth / img.height);
                                var h = img.width * (w / img.height);

                                canvas.width = w;
                                canvas.height = h;
                                ctx.rotate(Math.PI / 2);
                                // (0,-imgHeight) 从旋转原理图那里获得的起始点
                                ctx.drawImage(img, 0,-w, h, w  );
                                break;
                            case 3:     // 旋转180度
                                var w = Math.min(maxWidth, img.width);
                                var showWidth = Math.min(300, img.width);
                                var showHeight = img.height * (showWidth / img.width);
                                // 高度按比例计算
                                var h = img.height * (w / img.width);

                                // 设置 canvas 的宽度和高度
                                canvas.width = w;
                                canvas.height = h;

                                ctx.rotate(Math.PI);
                                ctx.drawImage(img, -w, -h,  w, h);
                                break;
                            case 8:     // 旋转-90度
                                var w = Math.min(maxWidth, img.height);
                                var showWidth = Math.min(300, img.height);
                                var showHeight = img.width * (showWidth / img.height);
                                var h = img.width * (w / img.height);

                                canvas.width = w;
                                canvas.height = h;
                                ctx.rotate(3 * Math.PI / 2);
                                ctx.drawImage(img, -h, 0,  h, w);
                                break;

                        }
                    }else{
                        var w = Math.min(maxWidth, img.width);
                        var showWidth = Math.min(300, img.width);
                        var showHeight = img.height * (showWidth / img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);

                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;

                        ctx.drawImage(img, 0, 0, w, h);
                    }



                    var base64 = canvas.toDataURL('image/jpeg',0.8);
                    // 插入到预览区
                    $thisObj.attr("style","width:"+showWidth+"px;height: "+showHeight+"px;float: right;margin-top: 9px;margin-left: 9px;margin-right: 0px;background-image:url('" + base64 +" ')");
                    var base64Data = base64.substr(base64.indexOf(",")+1);
                    console.log(base64Data);
                    $thisObj.parent().parent().find('.photoBase64').val(base64Data);
                };
            };


        });


    }


    $("#submitBtn").on("click",function(){

        var idNo = $('#idNo').val();
        var employeeNo = $('#employeeNo').val();
        var photoData = $('#photoBase64').val();


        if(idNo==null||idNo.trim()==''){
            alert("身份证号不能为空");
            return;
        }
        if(employeeNo==null||employeeNo.trim()==''){
            alert("员工工号不能为空");
            return;
        }

        if(photoData==null||photoData.trim()==''){
            alert("人脸图像为空");
            return;
        }

        $.ajax({
            url : "${ctx}/face/saveCollect",
            type : "POST",
            dataType:'json',
            data:$('#collectFaceForm').serialize(),
            success : function(data) {
                if (data.success) {
                    alert("人脸图像上传成功!");
                    window.close();
                } else {
                    alert(data.message);
                }
            },
            error : function(data) {

            }
        });
    });


</script>
</body>
</html>
